// src/components/QuestionEditor/QuestionWrapper.jsx
import React from 'react';
import { Card, Select, Switch, Space, Button, Input } from 'antd'; // 添加Input导入
import {
  SingleChoice,
  MultipleChoice,
  TextInput,
  RatingInput,
  LocationInput
} from './index';

const componentMap = {
  single: SingleChoice,
  multiple: MultipleChoice,
  text: TextInput,
  rating: RatingInput,
  location: LocationInput
};

const QuestionWrapper = ({ question, index, updateQuestion, deleteQuestion }) => {
  //根据映射表，进行组件的映射
  const QuestionComponent = componentMap[question.type];

  // 处理题型变化
  const handleTypeChange = (newType) => {
    updateQuestion({
      ...question,       // 保留现有字段
      type: newType,     // 更新题型
      options: newType === 'text' ? null : [], // 重置选项
      min: newType === 'rating' ? 1 : 0,       // 设置默认最小值
      max: newType === 'rating' ? 5 : 100      // 设置默认最大值
    });
  };

  // 处理标题变化
  const handleTitleChange = (e) => {
    updateQuestion({
      ...question,
      title: e.target.value
    });
  };

  return (
    <Card
      title={`题目 ${index + 1}`}
      style={{ marginBottom: 16 }}
      extra={
        <Button danger onClick={deleteQuestion}>
          删除
        </Button>
      }
    >
      <Space direction="vertical" style={{ width: '100%' }}>
        {/* 题目标题输入 */}
        <Input
          placeholder="请输入题目标题"
          value={question.title}
          onChange={handleTitleChange}
          style={{ marginBottom: 16 }}
        />

        {/* 题型选择 */}
        <Select
          value={question.type}
          onChange={handleTypeChange}
          style={{ width: 200, marginBottom: 16 }}
        >
          <Select.Option value="single">单选题</Select.Option>
          <Select.Option value="multiple">多选题</Select.Option>
          <Select.Option value="text">填空题</Select.Option>
          <Select.Option value="rating">评分题</Select.Option>
          <Select.Option value="location">定位题</Select.Option>
        </Select>

        {/* 必填开关 */}
        <Switch
          checked={question.required}
          onChange={checked => updateQuestion({ ...question, required: checked })}
          checkedChildren="必填"
          unCheckedChildren="可选"
          style={{ marginBottom: 16 }}
        />

        {/* 题型具体配置 */}
        {QuestionComponent && (
          <QuestionComponent
            question={question}
            updateQuestion={updateQuestion}
          />
        )}
      </Space>
    </Card>
  );
};

export default QuestionWrapper;